<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性盒子布局</title>
    <!-- 
       弹性盒子概念
            => 容器
            => 项目元素
            => 语法： 作用让普通div成为容器
                     display:flex;
            => 特点:
                 1. 默认有一个水平主轴： 元素沿主轴默认靠左排列
                 2. 改水平主轴为垂直方向
                     flex-direction: row;
                        => 设置主轴水平还是垂直
                 3. 主轴排列方式
                        justify-content: start;
                 4. 交叉轴排列方式
                     align-items: start;

                5. 当元素超过容器大小时，换行 
                    flex-wrap: wrap;

            => 项目元素相关样式
                flex-grow
                   => 当容器有剩余空间时
                flex-shrink
                   => 当容器空间不够元素占用时，元素缩放比例,默认值是1
                flex-basis
                    => 设置项目元素宽等价于width
                    
                     
                    
    -->
    <style>
        *{padding: 0;margin: 0;}

        .g-container{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            /* 设置弹性盒子 */
            display: flex;
            /* 设置主轴方向 */
            flex-direction: row;
            /* 元素主轴排列方式 */
            justify-content: start;
            /* 元素交叉轴排列方式 */
            align-items: start;

            /* 当元素超过容器大小时，换行 */
            flex-wrap: wrap;
        }

        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid red;

            /* flex-grow: 1; */
            flex-shrink: 0;
        }

        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            
            /* flex-grow: 1; */
            flex-shrink: 0;
        }

        .box3{
            width: 100px;
            height: 100px;
            border: 1px solid blueviolet;

            /* flex-grow: 1; */
            /* 当容器空间不够元素占用时，元素缩放比例,默认值是1 */
            flex-shrink: 0;
        }

        .box4{
            width: 100px;
            height: 100px;
            border: 1px solid blueviolet;

            flex-shrink: 0;
        }


        .box5{
            width: 100px;
            height: 100px;
            border: 1px solid blueviolet;

            flex-shrink: 0;

        }

    </style>
</head>
<body>
    <div class="g-container">
        <div class="box1">元素一</div>
        <div class="box2">元素二</div>
        <div class="box3">元素三</div>
        <div class="box4">元素四</div>
        <div class="box5">元素五</div>
    </div>
</body>
</html>